<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //获取所有要操作的按钮
            var add = document.getElementById("add");
            var copy = document.getElementById("copy");
            var remove = document.getElementById("remove");
            var replace = document.getElementById("replace");

            //为按钮绑定单击事件
            add.onclick = function () {
                //创建一个节点
                var img = document.createElement("img");//<img/>
                //为节点设置属性
                img.setAttribute("src", "imgs/2.png");//src
                img.setAttribute("width", "150px");//width
                img.setAttribute("height", "150px");//height

                //将元素添加的文档中  将元素追到到末尾
                document.body.appendChild(img);

                //创建文本节点
                var div = document.createElement("div");
                var textNode = document.createTextNode("666");
                div.appendChild(textNode);

                document.body.appendChild(div);

                //总结：添加节点-父元素.方法
            }

            copy.onclick = function () {
                //获取要复制的图片对象
                var pic = document.querySelector("#pic");

                var newNode = pic.cloneNode(false);//参数表示是否复制完整的子孙节点

                //在原有节点前面插入新节点 父元素.insertBefore
                document.body.insertBefore(newNode, pic);
            }


            remove.onclick = function () {
                var pic = document.querySelector("#pic");
                document.body.removeChild(pic);//移除元素
            }


            replace.onclick = function () {
                //创建一个节点
                var img = document.createElement("img");//<img/>
                //为节点设置属性
                img.setAttribute("src", "imgs/2.png");//src
                img.setAttribute("width", "150px");//width
                img.setAttribute("height", "150px");//height

                var pic = document.querySelector("#pic");
                document.body.replaceChild(img, pic);
            }


        }


    </script>
</head>

<body>
    <input type="button" value="添加" id="add">
    <input type="button" value="复制" id="copy">
    <input type="button" value="删除" id="remove">
    <input type="button" value="替换" id="replace">
    <br>
    <hr>

    <img src="imgs/1.png" style="width: 150px; height: 150px;" id="pic">








</body>

</html>